<template>
	<v-content ref="content" single flex padding-top="30" background="#ffad01">
		<v-header back title="查看试卷" background="#fff"></v-header>
		<div class="header padding">
			<div class="number">
				<div class="span">{{ current }}</div>
				/{{ questionLength }}
			</div>
		</div>

		<div class="main padding">
			<div class="number">
				<div class="span">{{ current }}</div>
				/{{ questionLength }}
			</div>
			<vQuestion v-model="answer" readonly></vQuestion>
			<!-- <div class="iscorrent" v-if="iscorrent">
				<uni-icons type="hand-up-filled" size="20" class="icon-success" color="#ffc926"></uni-icons>
				恭喜, 答对啦
			</div>
			<template v-else>
				<div class="iscorrent">
					<image class="icon-fail" src="/static/image/warning.png"></image>
					答错啦, 再接再厉哦
				</div>
				<div class="corrent">
					正确答案: <span style="margin-left: 15rpx">{{ nowQuestion.answer }}</span>
				</div>
			</template> -->
			<!-- <div class="content">题目解析</div> -->
			<!-- <div class="icon">
				<image class="analyze" src="/static/image/analyze.png"></image>
				试题解析
			</div>
			<div>
				<v-parse :content="nowQuestion.analysis"></v-parse>
				<div style="height: 50rpx"></div>
			</div> -->
		</div>

		<div class="footer">
			<div class="button" key="prev" @click="toPrev" v-if="current != 1">上一题</div>
			<div class="button" key="plac" v-else></div>
			<div class="button" key="next" @click="toNext" v-if="current != questionLength">下一题</div>

			<div class="answer-card" @click="onShowAnswerCard">
				<image class="image" src="/static/image/exam/answer-card.png"></image>
				答题卡
			</div>
		</div>
		<v-popup ref="vPopup" round round-size="20" :closeable="false">
			<div class="padding v-popup-content">
				<answer-card ref="AnswerCardRef" type="answer" @on-click="onHideAnswerPopup"></answer-card>
			</div>
		</v-popup>
	</v-content>
</template>

<script>
import mixins from "@/mixins"
import vQuestion from "./components/question.vue"
import answerCard from "./components/answer-card.vue"

export default {
	name: "answer",
	mixins: [mixins],
	data() {
		return {
			nowCountDown: {},
		}
	},
	computed: {
		message() {
			return this.$store.state.exam.message
		},
		questionLength() {
			return this.$store.getters["exam/questionLength"]
		},
		current: {
			get() {
				return this.$store.state.exam.current + 1
			},
			set(value) {
				this.$store.commit("exam/setCurrent", value - 1)
			},
		},
		answers() {
			return this.$store.getters["exam/answer"]
		},
		nowQuestion() {
			return this.$store.getters["exam/nowQuestion"]
		},
		answer: {
			get() {
				return this.$store.getters["exam/nowAnswer"]
			},
			set(value) {
				this.$store.commit("exam/setAnswer", { answer: value, index: this.current - 1 })
			},
		},

		isAnswerAll() {
			return this.answers.some(item => (item ? item.length : false))
		},
		iscorrent() {
			return this.nowQuestion.answer === this.answer.join()
		},
	},
	methods: {
		async init() {
			if (!this.message.id) {
				this.$store.dispatch("exam/getExam", { id: this.query.id, type: "finish" })
			}
		},

		toPrev() {
			if (this.current <= 1) {
				return
			}
			this.current--
		},
		toNext() {
			if (this.current >= this.questionLength) {
				return
			}
			this.current++
		},

		onCountDownChange(e) {
			this.nowCountDown = e
		},
		onShowAnswerCard() {
			this.$refs.vPopup.show()
			this.$nextTick(() => {
				this.$refs.AnswerCardRef.updateList()
			})
		},
		onHideAnswerPopup() {
			this.$refs.vPopup.hide()
		},
	},
	watch: {},
	components: {
		vQuestion,
		answerCard,
	},
}
</script>

<style lang="scss" scoped>
.v-popup-content {
	padding-bottom: 50rpx;
}
.header {
	color: #fff;
	display: flex;
	justify-content: flex-end;
	.item {
		font-size: 26rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-bottom: 14rpx;
		.image {
			width: 27rpx;
			height: 34rpx;
			margin-right: 10rpx;
		}
		.time {
			display: inline-flex;
			margin-left: 10rpx;
			font-size: 26rpx;
		}
	}
	.number {
		margin-left: auto;
		color: #fff !important;
		font-size: 31rpx;
		.span {
			color: #fff !important;
			font-size: 160%;
			display: inline-block;
			vertical-align: -5rpx;
		}
	}
}

.main {
	height: 100%;
	background: #fff;
	border-radius: 50rpx 0 0 0;
	padding-top: 60rpx;
	margin-top: 20rpx;
	overflow: auto;
	padding-bottom: 200rpx;
	.number {
		color: #808281;
		font-size: 31rpx;
		.span {
			color: $color;
			font-size: 160%;
			display: inline-block;
			vertical-align: -5rpx;
		}
	}
	.iscorrent {
		padding-top: 20rpx;
		padding-bottom: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffc926;
		.icon-success {
			margin-right: 10rpx;
			color: #ffc926;
			width: 32rpx;
			height: 28rpx;
		}
		.icon-fail {
			margin-right: 10rpx;
			color: #fb565a;
			width: 32rpx;
			height: 28rpx;
		}
		&:first-child {
			color: #ffc926 !important;
		}
		&:last-child {
			color: #fb565a !important;
		}
		&::before {
			content: "";
			display: inline-block;
			flex: 1;
			height: 0;
			border-bottom: 1px dashed #ccc;
			margin-right: 20rpx;
		}
		&::after {
			content: "";
			display: inline-block;
			flex: 1;
			height: 0;
			border-bottom: 1px dashed #ccc;
			margin-left: 20rpx;
		}
	}
	.icon {
		color: #818181;
		.analyze {
			width: 27rpx;
			height: 29rpx;
		}
	}
	.corrent {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		span {
			color: #ffc926;
		}
	}
}

.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #f9f9f9;
	color: #959595;
	text-align: center;
	height: 110rpx;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	box-sizing: content-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.answer-card {
		position: absolute;
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		background: $color;
		color: #fff;
		font-size: 24rpx;
		bottom: 20rpx;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 2;
		.image {
			width: 42rpx;
			height: 42rpx;
			display: block;
			margin: auto;
			margin-top: 30rpx;
			margin-bottom: 10rpx;
		}
	}
	.button {
		width: 45%;
		height: 100%;
		background: transparent;
		box-shadow: none;
		color: inherit;
	}
}
</style>
